<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css表格属性</title>
    <!--
    小结
    1、如果你是对表格的整体样式的设置，在table元素设置
        如果是针对每行每列的设置，则到tr td th设置
    2、建议  表格的分配比例在表头设置
    -->
    <style type="text/css">
        table{
            width:500px;
            text-align: center;
            border:3px solid #999999;
            /*border-collapse: collapse; 表示将表格的各个边框合并到一起*/
            border-collapse: separate;
            background-color: magenta;
            margin:0 auto;
            /*border-spacing: 10px 50px;*/
            /*标题的位置*/
            /*caption-side: bottom;*/
            /*把表格的各列平均分配*/
            /*table-layout: fixed;*/
            /*table-layout: automatic;*/
        }
        tr,th,td{
            border:1px solid #ffdd00;
            line-height:30px;
        }
        .tebie{
            background-color: lightcyan;
        }
    </style>
</head>
<body>
<table>
    <caption><h1>水浒英雄排行榜</h1></caption>
    <tr class="tebie">
        <th width="10%">编号</th>
        <th width="20%">名字</th>
        <th width="70%">外号</th>
    </tr>
    <tbody>
    <tr>
        <td>001</td>
        <td>宋江</td>
        <td>及时雨及时雨及时雨及时雨及时雨及时雨及时雨及时雨及时雨</td>
    </tr>
    <tr>
        <td>002</td>
        <td>卢俊义</td>
        <td>玉麒麟</td>
    </tr>
    <tr>
        <td>003</td>
        <td>宋江</td>
        <td>及时雨</td>
    </tr>
    <tr>
        <td>004</td>
        <td>卢俊义</td>
        <td>玉麒麟</td>
    </tr>
    </tbody>
</table>
</body>
</html>